<template>
    <div class="panel-group">
        <el-row class="panel-wrap">
            <el-col :span="6" class="panel-item" v-for="item in newData" :key="item.id">
                <div class="panel">
                    <p class="title">{{item.title}}</p>
                    <p class="date">
                        {{$moment(item.startDate).format('YYYY.MM.DD')}}
                        ~
                        {{$moment(item.endDate).format('YYYY.MM.DD')}}
                    </p>
                    <p class="percent">{{item.nonu}}/{{item.total}}</p>
                    <p class="progress">
                        <el-progress :percentage="item.percentage" :color="item.color"></el-progress>
                    </p>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'panel-group',
    data() {
        return {
            panelData: [
                {
                    id: 1,
                    title: '第98期上市公司董事会秘书培训班',
                    startDate: new Date().getTime() - 789456132,
                    endDate: new Date().getTime() + 789456132,
                    total: 106,
                    nonu: 40
                },
                {
                    id: 2,
                    title: '第100期上市公司董事会秘书培训班（后续）',
                    startDate: new Date().getTime() - 13212145,
                    endDate: new Date().getTime() + 13212145,
                    total: 106,
                    nonu: 86
                },
                {
                    id: 3,
                    title: '第97期上市公司董事会秘书培训班',
                    startDate: new Date().getTime() - 956516545,
                    endDate: new Date().getTime() + 956516545,
                    total: 135,
                    nonu: 128
                },
                {
                    id: 4,
                    title: '第96期上市公司董事会秘书培训班',
                    startDate: new Date().getTime() - 1652132,
                    endDate: new Date().getTime() + 1652132,
                    total: 108,
                    nonu: 108
                }
            ]
        }
    },
    computed: {
        newData() {
            return this.panelData.map(item => {
                item.percentage = (item.nonu / item.total).toFixed(2) * 100;
                item.color = '#f56c6c';
                return item
            })
        }
    },
}
</script>

<style lang="less" scoped>
    .panel-group {
        color: #444;

        .panel-wrap {
            margin-left: -10px;
            margin-right: -10px;

            .panel-item {
                padding: 0 10px;

                .panel {
                    padding: 20px 30px;
                    height: 150px;
                    border: 1px solid #E5E8EC;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    background-color: rgba(255,255,255,.7);
                    
                    .title {
                        font-weight: bold;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                        margin-bottom: 10px;
                    }

                    .date {
                        font-size: 14px;
                        color: #898989;
                    }

                    .percent {
                        margin-top: 15px;
                        font-size: 36px;
                        color: #000;
                    }
                }
            }
        }
        
    }
</style>

